<template>
  <div
    class="app-container flex flex-direction flex-sub"
    style="background: none; height: 100%; padding: 1rem"
  >
    <el-card shadow="never" class="box-card flex-sub" style="overflow: auto">
      <div class="div-query">
        <div class="collapse">
          <div class="collapse-header" @click="panelActive = !panelActive">
            <i
              class="collapse-header-icon"
              :class="[
                panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top',
              ]"
            />
            {{ panelActive ? '隐藏' : '展开' }}查询条件
          </div>
          <div class="collapse-content">
            <el-collapse-transition>
              <div v-show="panelActive">
                <el-form size="small" label-position="right">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="设备分类" label-width="80px">
                        <el-select
                          v-model="form.deviceCategory"
                          placeholder="请选择设备分类"
                          clearable
                        >
                          <el-option
                            v-for="item in deviceCategoryList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="设备编号" label-width="80px">
                        <el-input
                          v-model="form.deviceSource"
                          placeholder="请输入设备编号"
                          clearable
                        ></el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="设备名称" label-width="80px">
                        <el-input
                          v-model="form.deviceName"
                          placeholder="请输入设备名称"
                          clearable
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="隔离时间" label-width="80px">
                        <el-date-picker
                          v-model="createdTime"
                          type="datetimerange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          clearable
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item style="margin-left: 10px">
                        <el-button
                          type="primary"
                          icon="el-icon-search"
                          @click="search"
                          size="small"
                          style="margin-right: 10px"
                          >搜索</el-button
                        >
                        <el-button
                          icon="el-icon-delete"
                          @click="reset"
                          type="info"
                          size="small"
                          style="margin-right: 10px"
                          >重置</el-button
                        >

                        <el-button size="small" @click="getDataList">
                          <i class="el-icon-refresh" style="color: #606266" />
                          <span style="color: #606266">刷新</span>
                        </el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>

      <div style="margin-bottom: 8px">
        <el-button size="small" type="primary" @click="add">
          <i
            class="iconfont icon-xinzenghuizong"
            style="font-size: 13px; margin-right: 5px"
          />添加隔离
        </el-button>
      </div>

      <el-table
        size="medium"
        :data="dataList"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        border
        fit
        :default-sort="{ prop: 'createdTime', order: 'descending' }"
        :header-cell-style="{ background: '#fafafa' }"
      >
        <el-table-column align="center" label="设备分类" width="80">
          <template slot-scope="{ row }">
            {{ dictChange2(row.deviceCategory) }}
          </template>
        </el-table-column>
        <el-table-column prop="deviceSource" align="center" label="设备编码">
        </el-table-column>
        <el-table-column prop="deviceName" align="center" label="设备名称">
        </el-table-column>
        <el-table-column align="center" label="隔离声音" width="80">
          <template slot-scope="{ row }">
            {{ row.isolateVoice == 0 ? '不隔离' : '隔离' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="隔离弹框 " width="80">
          <template slot-scope="{ row }">
            {{ row.isolatePopbox == 0 ? '不隔离' : '隔离' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="隔离地图" width="80">
          <template slot-scope="{ row }">
            {{ row.isolateMap == 0 ? '不隔离' : '隔离' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          align="center"
          label="隔离开始时间"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="endTime"
          align="center"
          label="隔离结束时间"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="isolateReason" align="center" label="隔离原因">
        </el-table-column>
        <el-table-column
          prop="operator"
          align="center"
          label="操作人"
          width="100"
        >
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="{ row }">
            <el-tooltip effect="dark" content="详情" placement="top-start">
              <i
                class="iconfont icon-chakanxiangqing2 i-detail"
                @click="detail(row)"
              />
            </el-tooltip>

            <i class="iconfont icon-fengefu i-fengefu" />

            <el-tooltip effect="dark" content="编辑" placement="top-start">
              <i class="iconfont icon-bianji2 i-edit" @click="edit(row)" />
            </el-tooltip>
            <i class="iconfont icon-fengefu i-fengefu" />

            <el-tooltip effect="dark" content="删除" placement="top-start">
              <i
                class="iconfont icon-shanchu i-delete"
                @click="handleDelete(row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pagination.pageNum"
        :limit.sync="pagination.pageSize"
        :page-sizes="pageSizeOptions"
        @pagination="getDataList()"
      />
    </el-card>

    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      width="60%"
      top="80px"
      :before-close="clickCloseBtn"
      :close-on-click-modal="false"
    >
      <div v-if="!isDetail">
        <el-container>
          <el-main
            :style="{ 'max-height': maxHeightDialog }"
            class="container-main"
          >
            <div class="title">
              <span>填写信息</span>
            </div>
            <el-card class="card" shadow="never" style="background: #fafafa">
              <el-form
                ref="ruleForm"
                size="small"
                :model="ruleForm"
                :rules="rules"
                label-position="right"
                label-width="120px"
              >
                <div>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="设备分类" prop="deviceCategory">
                        <el-select
                          v-model="ruleForm.deviceCategory"
                          filterable
                          placeholder="请选择设备分类"
                          clearable
                          @change="getCategoryList"
                          @clear="clear"
                          style="width: 100%"
                          :disabled="title == '编辑设备隔离' ? true : false"
                        >
                          <el-option
                            v-for="item in deviceCategoryList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="设备编码" prop="deviceSource">
                        <el-select
                          v-model="ruleForm.deviceSource"
                          filterable
                          placeholder="请选择设备编码"
                          clearable
                          @change="getCategoryDetail"
                          @clear="clear"
                          style="width: 100%"
                          :disabled="title == '编辑设备隔离' ? true : false"
                        >
                          <el-option
                            v-for="(item, index) in c_list"
                            :key="index"
                            :label="
                              ruleForm.deviceCategory == 'transoport'
                                ? item.transoportCode
                                : ruleForm.deviceCategory == 'host'
                                ? item.hostCode
                                : item.deviceSource
                            "
                            :value="
                              ruleForm.deviceCategory == 'transoport'
                                ? item.transoportCode
                                : ruleForm.deviceCategory == 'host'
                                ? item.hostCode
                                : item.deviceSource
                            "
                          >
                            <span style="float: left">{{
                              ruleForm.deviceCategory == 'transoport'
                                ? item.transoportCode
                                : ruleForm.deviceCategory == 'host'
                                ? item.hostCode
                                : item.deviceSource
                            }}</span>
                            <span
                              style="
                                float: right;
                                color: #8492a6;
                                font-size: 13px;
                              "
                              >{{
                                ruleForm.deviceCategory == 'transoport'
                                  ? item.transoportName
                                  : ruleForm.deviceCategory == 'host'
                                  ? item.hostName
                                  : item.deviceName
                              }}</span
                            >
                          </el-option>

                          <!-- <el-option
                            v-for="item in c_list"
                            :key="item.id"
                            :label="
                              item.deviceCode
                                ? item.deviceCode
                                : item.transoportCode
                                ? item.transoportCode
                                : item.hostCode
                                ? item.hostCode
                                : item.id
                            "
                            :value="
                              item.deviceCode
                                ? item.deviceCode
                                : item.transoportCode
                                ? item.transoportCode
                                : item.hostCode
                                ? item.hostCode
                                : item.id
                            "
                          >
                          </el-option> -->
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="设备信息"
                        ><el-descriptions
                          border
                          :column="1"
                          :labelStyle="{ width: '170px' }"
                        >
                          <el-descriptions-item
                            v-for="(item, index) in detailTitle"
                            :key="index"
                          >
                            <template slot="label">
                              {{ item }}
                            </template>
                            {{ c_detail[index] }}
                          </el-descriptions-item>
                        </el-descriptions>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="隔离声音">
                        <el-radio v-model="ruleForm.isolateVoice" :label="0"
                          >不隔离</el-radio
                        >
                        <el-radio v-model="ruleForm.isolateVoice" :label="1"
                          >隔离</el-radio
                        >
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="隔离弹框">
                        <el-radio v-model="ruleForm.isolatePopbox" :label="0"
                          >不隔离</el-radio
                        >
                        <el-radio v-model="ruleForm.isolatePopbox" :label="1"
                          >隔离</el-radio
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="隔离地图">
                        <el-radio v-model="ruleForm.isolateMap" :label="0"
                          >不隔离</el-radio
                        >
                        <el-radio v-model="ruleForm.isolateMap" :label="1"
                          >隔离</el-radio
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="隔离开始时间" prop="startTime">
                        <el-date-picker
                          v-model="ruleForm.startTime"
                          type="datetime"
                          placeholder="请选择隔离开始时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          style="width: 100%"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="隔离结束时间" prop="endTime">
                        <el-date-picker
                          v-model="ruleForm.endTime"
                          type="datetime"
                          placeholder="请选择隔离结束时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          style="width: 100%"
                          :picker-options="pickerOptions"
                        >
                        </el-date-picker
                      ></el-form-item>
                    </el-col>
                  </el-row>

                  <el-form-item label="隔离原因" prop="isolateReason">
                    <el-input
                      v-model="ruleForm.isolateReason"
                      placeholder="请输入隔离原因"
                      clearable
                    ></el-input
                  ></el-form-item>
                  <el-form-item label="操作人">
                    <el-input
                      v-model="operator"
                      placeholder="请输入操作人"
                      disabled
                    ></el-input
                  ></el-form-item>
                </div>
              </el-form>
            </el-card>
          </el-main>
          <el-footer>
            <el-button @click="cancel('ruleForm')" style="margin-right: 10px"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="
                title == '新增设备隔离'
                  ? submitAdd('ruleForm')
                  : submitEdit('ruleForm')
              "
            >
              确定
            </el-button>
          </el-footer>
        </el-container>
      </div>
      <div v-else>
        <el-container>
          <el-main>
            <el-card class="card" shadow="never" style="border: 0">
              <el-descriptions
                border
                :column="2"
                :labelStyle="{ width: '170px' }"
              >
                <el-descriptions-item>
                  <template slot="label"> 设备分类: </template>
                  {{ dictChange2(deviceIsoDetail.deviceCategory) }}
                </el-descriptions-item>
                <el-descriptions-item
                  v-for="(item, index) in detailTitle"
                  :key="index"
                >
                  <template slot="label"> {{ item }}: </template>
                  {{ c_detail[index] ? c_detail[index] : '' }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 隔离声音: </template>
                  {{ deviceIsoDetail.isolateVoice == 0 ? '不隔离' : '隔离' }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 隔离弹窗: </template>
                  {{ deviceIsoDetail.isolatePopbox == 0 ? '不隔离' : '隔离' }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 隔离地图: </template>
                  {{ deviceIsoDetail.isolateMap == 0 ? '不隔离' : '隔离' }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 隔离时间: </template>
                  {{ deviceIsoDetail.startTime }} -
                  {{ deviceIsoDetail.endTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 隔离原因: </template>
                  {{ deviceIsoDetail.isolateReason }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 操作人员: </template>
                  {{ deviceIsoDetail.operator }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-main>
          <el-footer>
            <el-button @click="showDialog = false">关闭</el-button>
          </el-footer>
        </el-container>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import warningManageApi from '@/api/warning-manage'
import deviceListApi from '@/api/firefight-manage'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import obj from './list'
import dataTableMixins from '@/mixins/data-table-mixins'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Treeselect,
    Pagination,
  },
  mixins: [dataTableMixins],
  data() {
    return {
      title: null, // 标题
      showDialog: false, // 显示对话框
      isDetail: false, //是否详情
      // 搜索表单
      form: {
        deviceCategory: null,
        deviceSource: null,
        deviceName: null,
        gridMount: null,
        isolateStatus: null,
      },
      createdTime: null,

      deviceIsoDetail: {}, //设备隔离详情
      deviceTypeList: [], //设备类型列表
      wifiDeviceList: [], //无线设备列表
      wifiDeviceDetail: {}, //无线设备详情
      c_list: [], //各设备分类列表
      c_detail: {}, //各设备分类详情
      transList: [], //传输设备列表
      transDetail: {}, //传输设备详情
      hostList: [], //消防主机列表
      hostDetail: {}, //消防主机详情
      wireList: [], //有线探点列表
      wireDetail: {}, //有线探点详情
      deviceCategoryList: obj.list, // 设备分类枚举列表
      detailTitle: [],

      // 分页
      selectedList: [], //选中列表数据
      // 添加列表
      ruleForm: {
        id: null,
        deviceCategory: null,
        deviceSource: null,
        isolateVoice: null,
        isolatePopbox: null,
        isolateMap: null,
        startTime: null,
        endTime: null,
        isolateReason: null,
      },
      operator: this.$store.state.account.user.username,
      // 表单验证
      rules: {
        deviceCategory: [
          { required: true, message: '请选择设备分类', trigger: 'change' },
        ],
        deviceSource: [
          { required: true, message: '请选择设备编号', trigger: 'change' },
        ],
        startTime: [
          { required: true, message: '请选择隔离开始时间', trigger: 'change' },
        ],
        endTime: [
          { required: true, message: '请选择隔离结束时间', trigger: 'change' },
        ],
        isolateReason: [
          { required: true, message: '请输入隔离原因', trigger: 'blur' },
        ],
      },
      gridTree: [], //网格树形列表
      isolateStatus: [
        { label: '正在隔离', value: 0 },
        { label: '已结束', value: 1 },
      ],
    }
  },
  watch: {
    'deviceIsoDetail.deviceType'(val) {
      let value = this.deviceTypeList.find((_val) => {
        return (_val.dictValue = val)
      })
      if (value) {
        this.deviceIsoDetail.deviceType = value.dictText
      }
    },
    'wifiDeviceDetail.deviceType'(val) {
      let value = this.deviceTypeList.find((_val) => {
        return (_val.dictValue = val)
      })
      if (value) {
        this.wifiDeviceDetail.deviceType = value.dictText
      }
    },
  },
  computed: {
    // 结束时间必须大于开始时间
    pickerOptions() {
      let that = this
      return {
        disabledDate(time) {
          let st = Date.parse(that.ruleForm.startTime)
          return time.getTime() <= st
        },
      }
    },
  },
  created() {
    this.getDataList()
    this.getGrid()
    this.getDeviceTypeList() //设备类型字典列表
  },
  mounted() {},
  methods: {
    // 获取列表分页数据
    getDataList() {
      let createdTimeFrom = '',
        createdTimeTo = ''
      if (Array.isArray(this.createdTime)) {
        createdTimeFrom = this.createdTime[0]
        createdTimeTo = this.createdTime[1]
      }
      warningManageApi
        .getDeviceIsolationList({
          ...this.pagination,
          ...this.form,
          startTime: createdTimeFrom,
          endTime: createdTimeTo,
          isolateType: 'equipment',
        })
        .then((res) => {
          if (res.status === 200) {
            this.dataList = res.data.data.rows
            this.total = res.data.data.total
          } else {
            this.$message.error('获取服务器列表失败,请重试!')
          }
        })
    },
    // 根据选中设备分类给列表赋值
    getCategoryList(val) {
      if (this.title.indexOf('编辑') == -1) {
        this.ruleForm.deviceSource = null
        this.detailTitle = []
      }
      if (val == 'wireless') {
        this.getWifiList()
      } else if (val == 'transoport') {
        this.getTransList()
      } else if (val == 'host') {
        this.getHostList()
      } else if (val == 'wire') {
        this.getWireList()
      }
    },
    // 获取无线设备列表
    getWifiList() {
      warningManageApi
        .getWifiDeviceList({ deviceIsLine: 1, pageNum: 1, pageSize: 10000 })
        .then((res) => {
          if (res.status === 200) {
            this.c_list = res.data.data.rows
          }

          if (this.title != '新增设备隔离') {
            if (this.title == '设备隔离详情') {
              this.getCategoryDetail(
                this.deviceIsoDetail.deviceSource,
                this.deviceIsoDetail.deviceCategory
              )
            } else {
              this.getCategoryDetail(
                this.ruleForm.deviceSource,
                this.ruleForm.deviceCategory
              )
            }
          }
        })
    },
    // 获取传输设备列表
    getTransList() {
      deviceListApi.getTransList({ pageNum: 1, pageSize: 10000 }).then((res) => {
        if (res.status === 200) {
          this.c_list = res.data.data.rows
        }

        if (this.title != '新增设备隔离') {
          if (this.title == '设备隔离详情') {
            this.getCategoryDetail(
              this.deviceIsoDetail.deviceSource,
              this.deviceIsoDetail.deviceCategory
            )
          } else {
            this.getCategoryDetail(
              this.ruleForm.deviceSource,
              this.ruleForm.deviceCategory
            )
          }
        }
      })
    },
    // 消防主机列表
    getHostList() {
      deviceListApi
        .getFireMainList({ pageNum: 1, pageSize: 10000 })
        .then((res) => {
          if (res.status === 200) {
            this.c_list = res.data.data.rows
          }

          if (this.title != '新增设备隔离') {
            if (this.title == '设备隔离详情') {
              this.getCategoryDetail(
                this.deviceIsoDetail.deviceSource,
                this.deviceIsoDetail.deviceCategory
              )
            } else {
              this.getCategoryDetail(
                this.ruleForm.deviceSource,
                this.ruleForm.deviceCategory
              )
            }
          }
        })
    },
    // 有线探点列表
    getWireList() {
      deviceListApi
        .getFireCollectList({ deviceIsLine: 0, pageNum: 1, pageSize: 10000 })
        .then((res) => {
          if (res.status === 200) {
            this.c_list = res.data.data.rows
          }

          if (this.title != '新增设备隔离') {
            if (this.title == '设备隔离详情') {
              this.getCategoryDetail(
                this.deviceIsoDetail.deviceSource,
                this.deviceIsoDetail.deviceCategory
              )
            } else {
              this.getCategoryDetail(
                this.ruleForm.deviceSource,
                this.ruleForm.deviceCategory
              )
            }
          }
        })
    },
    // 根据选中设备分类给详情赋值
    getCategoryDetail(val, device_cate) {
      console.log('getCategoryDetail>val=',val)
        console.log('getCategoryDetail>device_cate=',device_cate)
      console.log('this.c_list=',this.c_list)
      let str = ''
      if (!device_cate) {
        str = this.ruleForm.deviceCategory
      } else {
        str = device_cate
      }
      if (str == 'wire') {
        let detail = this.c_list.find((e) => {
          return e.deviceSource == val
        })
        if (detail) {
          this.c_detail = [
            detail.deviceSource, //设备编码
            detail.deviceName, // 设备名称
            this.dictChange(detail.deviceType), // 设备类型
            detail.deviceLocation, // 设备所在位置
            detail.gridMountFullPathText, // 设备所属网格
          ]
        }
      } else if (str == 'wireless') {
        let detail = this.c_list.find((e) => {
          return e.deviceSource == val
        })
        if (detail) {
          this.c_detail = [
            detail.deviceSource, //无线设备编码
            detail.deviceName, // 无线设备名称
            this.dictChange(detail.deviceType), // 无线设备类型
            detail.deviceModel, // 无线设备型号
            detail.deviceLocation, // 无线设备所在位置
            detail.gridMountFullPathText, // 无线设备所属网格
          ]
        }
      }

      // if (str == 'wireless' || str == 'wire') {
      //   let detail = this.c_list.find((e) => {
      //     return e.deviceSource == val
      //   })
      //   if (detail) {
      //     this.c_detail = [
      //       detail.deviceSource, //
      //       detail.deviceName,
      //       this.dictChange(detail.deviceType),
      //       detail.deviceModel,
      //       detail.deviceLocation,
      //       detail.gridMountFullPathText,
      //     ]
      //   }
      // }
      else if (str == 'transoport') {
        let detail = this.c_list.find((e) => {
          return e.transoportCode == val
        })
        if (detail) {
          this.c_detail = [
            detail.transoportCode, // 传输设备编码
            detail.transoportName, // 传输设备名称
            detail.equipmentModel, // 传输设备型号
            detail.allPathName, // 传输设备所属服务器
            detail.equipmentLocation, // 传输设备所在位置
            detail.gridMountFullPathText, // 传输设备所属网格
          ]
        }
      } else if (str == 'host') {
        let detail = this.c_list.find((e) => {
          return e.hostCode == val
        })
        if (detail) {
          this.c_detail = [
            detail.hostCode, // 消防主机编码
            detail.hostName, // 消防主机名称
            detail.hostModel, // 消防主机型号
            detail.allPathName, // 消防主机所属传输设备
            detail.hostLocation, // 消防主机所在位置
            detail.gridMountFullPathText, // 消防主机所属网格
          ]
        }
      }
      this.detailTitle = obj.title[str]
    },

    // 获取网格列表
    getGrid() {
      warningManageApi.getGridTree().then((res) => {
        if (res.status === 200) {
          this.gridTree = res.data.data.rows
        }
      })
    },
    // 设备类型字典列表
    getDeviceTypeList() {
      warningManageApi.getdeviceTypeList().then((res) => {
        if (res.status === 200) {
          this.deviceTypeList = res.data.dictValue
        }
      })
    },
    // 多选
    handleSelectionChange(val) {
      // console.log(val, '选中')
      this.selectedList = val // 存储选中数据
    },
    // 搜索
    search() {
      this.pagination.pageNum = 1
      this.getDataList()
    },

    // 重置
    reset() {
      this.createdTime = null
      this.wifiDeviceDetail = {}
      Object.keys(this.form).forEach((key) => {
        this.form[key] = null
      })
      this.clearRuleForm()
      this.search()
    },
    // 取消
    cancel(formName) {
      this.reset()
      setTimeout(() => {
        this.$refs[formName].clearValidate()
      }, 120)
      this.showDialog = false
    },
    // 关闭按钮
    clickCloseBtn(done) {
      this.reset()
      setTimeout(() => {
        if (this.$refs['ruleForm']) {
          this.$refs['ruleForm'].clearValidate()
        }
      }, 120)
      done()
    },
    // 新增
    add() {
      this.reset()
      setTimeout(() => {
        this.$refs['ruleForm'].clearValidate()
      }, 120)

      this.title = '新增设备隔离'
      this.showDialog = true
      this.isDetail = false
    },
    // 提交新增
    submitAdd(formName) {
      const params = { ...this.ruleForm, operator: this.operator }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          warningManageApi.addDeviceIsolation(params).then((res) => {
            if (res.status === 200) {
              this.$message({
                message: '添加成功!',
                type: 'success',
              })
              this.$refs[formName].clearValidate()
              this.reset()
              this.showDialog = false
            } else {
              this.$message.error('添加失败,请重试!')
            }
          })
        } else {
          return false
        }
      })
    },
    // 删除
    handleDelete(val) {
      this.$confirm('是否删除该设备隔离?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(
        () => {
          warningManageApi
            .deleteDeviceIsolation({
              id: val.id,
            })
            .then((res) => {
              if (res.status === 200) {
                this.$message({
                  message: '删除成功!',
                  type: 'success',
                })
                this.reset()
                this.showDialog = false
              } else {
                this.$message.error('删除失败,请重试!')
              }
            })
        },
        () => {}
      )
    },
    // 详情
    async detail(val) {
      // console.log(val.deviceCategory, val.deviceSource, '详情')
      await warningManageApi
        .getDeviceIsolationDetail({ id: val.id })
        .then((res) => {
          if (res.status === 200) {
            // console.log(res)
            this.deviceIsoDetail = res.data.data[0]
            this.title = '设备隔离详情'
            this.showDialog = true
            this.isDetail = true
          } else {
            this.$message.error('打开详情失败')
          }

          this.getCategoryList(val.deviceCategory)
        })

      // setTimeout(() => {
      //   this.getCategoryDetail(val.deviceSource)
      // }, 500)
    },
    // 编辑
    edit(val) {
      console.log(val, '编辑')
      this.isDetail = false
      this.showDialog = true
      this.title = '编辑设备隔离'
      Object.keys(this.ruleForm).forEach((key) => {
        Object.keys(val).forEach((_key) => {
          if (key == _key) {
            this.ruleForm[key] = val[_key]
          }
        })
      })
      this.getCategoryList(val.deviceCategory)

      // setTimeout(() => {
      //   this.getCategoryDetail(val.deviceSource)
      // }, 500)
    },
    // 提交编辑
    submitEdit(formName) {
      const params = { ...this.ruleForm, operator: this.operator }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          warningManageApi.updateDeviceIsolation(params).then((res) => {
            if (res.status === 200) {
              this.$message({
                message: '编辑成功!',
                type: 'success',
              })
              this.$refs[formName].clearValidate()
              this.showDialog = false
              this.reset()
            } else {
              this.$message.error('编辑失败,请重试!')
            }
          })
        }
      })
    },
    // 自定义树形控件键名
    normalizer(node) {
      return {
        id: node.guid,
        label: node.label,
        children: node.children,
      }
    },
    // 获取网格节点数据
    getGridNode(node) {},
    // 清空设备分类列表
    clear() {
      this.c_list = []
      this.c_detail = {}
      this.detailTitle = []
    },
    // 重置ruleForm
    clearRuleForm() {
      Object.keys(this.ruleForm).forEach((e) => {
        this.ruleForm[e] = null
      })
      this.c_list = []
      this.c_detail = {}
      this.detailTitle = []
    },
    // 设备类型字典转换
    dictChange(val) {
      let dict = this.deviceTypeList.find((e) => {
        return val == e.dictValue
      })
      if (dict) {
        return dict.dictText
      }
    },
    // 设备分类字典转换
    dictChange2(val) {
      let dict = obj.list.find((e) => {
        return val == e.value
      })
      if (dict) {
        return dict.label
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../../../styles/part-custom';
</style>
